<template>
	<div class="personal">
		<div class="personal-top">
			<span class="personal-top-title">
				{{ $t('personalCenter.personalCenter', '个人中心') }}
			</span>
			<button
				v-if="isHasHomeMenu && !appLauncher"
				class="personal-top-backHome"
				@click="back"
			>
				{{ $t('personalCenter.backToHomepage', '返回首页') }}
			</button>
		</div>
		<div class="personal-main">
			<personalInformation
				:title="
					$t('personalCenter.currentOrganization', '当前所在组织：') +
					(tenantName ?? $t('common.none', '无'))
				"
			></personalInformation>
			<securityCenter
				v-if="
					((!privateTenant && securityAccount === 1 && env_type === 'prd') ||
						(privateTenant &&
							securityAccount === 1 &&
							jurisdiction &&
							env_type === 'prd')) &&
					!isOutsideOrg
				"
				@showTip="showTip"
			></securityCenter>
		</div>
		<a-alert
			v-show="alertShow"
			class="Tips"
			:message="alertMsg"
			:type="alertType"
			show-icon
		/>
	</div>
</template>
<script lang="ts">
import { useStore } from 'vuex'
import {
	defineComponent,
	reactive,
	toRefs,
	unref,
	onMounted,
	ref,
	computed,
} from 'vue'
import { useRouter } from 'vue-router'
import { useTenantDetails } from '@/entry_desktop/hooks/useVueStore'
import personalInformation from './components/personalInformation/index.vue'
import securityCenter from './components/securityCenter/index.vue'
import { i18n } from '@/locales'
import { apiInit } from '@/services'

const { $t } = i18n
const api = apiInit()

export default defineComponent({
	components: {
		personalInformation,
		securityCenter,
	},

	setup() {
		// SaaS租户
		const privateTenant = ref(false)
		// 是否开启了百特搭安全账号功能
		const securityAccount = ref('1')
		// 访问用户拥有设计态访问权限
		const jurisdiction = ref(false)
		// alert弹窗的信息
		const alertShow = ref(false)
		// 环境类型
		const env_type = ref('')
		const alertType = ref('')
		const alertMsg = ref('')
		const tenantName = ref('')

		const router = useRouter()
		const store = useStore()
		const isOutsideOrg = computed(
			() => store.state.userInfo.org_type === 'EXTERNAL'
		)
		const appLauncher = computed(
			() => store.state.tenant?.tenant_auth?.app_launcher === 1
		)
		const back = () => {
			router.push('/home')
		}
		const showTip = (options: any) => {
			alertShow.value = true

			alertType.value = options.type
			alertMsg.value = options.msg

			let timer = setTimeout(() => {
				alertShow.value = false
				clearInterval(timer)
			}, 2000)
		}
		// ● 若SaaS租户开启了百特搭安全账号功能，则所有用户点击个人中心可见【百特搭安全账号】模块。
		// 若私有化租户开启了百特搭安全账号功能，且访问用户拥有设计态访问权限，则点击个人中心可见【百特搭安全账号】模块：
		onMounted(() => {
			getMenuList()

			isOutsideOrg.value
				? (tenantName.value = store.state.userInfo.department_name || '')
				: (tenantName.value = store.state.userInfo.cur_dept?.dept_name || '')

			console.log('🍊 ----- tenantName.value:', tenantName.value)

			// tenantName.value = store.state.tenant.tenant_name
			// SaaS租户is_private_environment为true是私有化租户为false是SaaS租户
			privateTenant.value = store.state.tenant.is_private_environment
			// 是否开启了百特搭安全账号功能
			securityAccount.value =
				store.state.tenant.tenant_auth.baiteda_security_account
			// 访问用户拥有设计态访问权限
			jurisdiction.value = store.state.userInfo.app_admin
			env_type.value = store.state.tenant.env_type
		})
		const isHasHomeMenu = ref(false)
		// 获取菜单列表
		const getMenuList = async () => {
			const { data, code } = await api.default.ListMenuPrivateV2POST({})
			if (code === '000000') {
				;(data as unknown[]).forEach((item: any) => {
					if (item.menu_id === 'home') {
						isHasHomeMenu.value = true
					}
				})
			}
		}
		return {
			back,
			privateTenant,
			securityAccount,
			jurisdiction,
			env_type,
			showTip,
			alertType,
			alertMsg,
			alertShow,
			tenantName,
			isOutsideOrg,
			isHasHomeMenu,
			appLauncher,
		}
	},
})
</script>
<style lang="less">
.personal {
	.personal-top {
		padding: 0 0 10px 0;
		margin: 0 37px 0 40px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		&-title {
			font-size: 14px;
			font-weight: bold;
		}
		&-backHome {
			// width: 88px;
			padding: 0 16px;
			height: 32px;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: 500;
			font-size: 14px;
			// line-height: 100%;
			color: #1f2329;
			background-color: #f2f4f7;
			border: 1px solid #dee0e3;
			border-radius: 4px;
			cursor: pointer;
		}
		&-backHome:hover {
			background: #ffffff;
			border-radius: 4px;
			color: var(--bl-brand-c);
		}
	}
	.personal-main {
		margin: 0 37px 0 40px;
	}
	.Tips {
		position: fixed;
		top: 50px;
		left: 45%;
		// transform: translateX(-50%);
		z-index: 9;
	}
	// .personal-main {
	// 	display: flex;
	// 	min-height: 600px;
	// 	height: calc(100vh - 180px);
	// 	.personal-main-left {
	// 		height: calc(100%);
	// 		background: #ffffff;
	// 		margin-right: 16px;
	// 		padding-top: 24px;
	// 		border-radius: 6px;

	// 		.ant-menu-item-selected {
	// 			border-left: 3px solid @rok-primary-color;
	// 			background: @rok-label-bg-color;
	// 		}
	// 		.ant-menu-item.ant-menu-item-selected {
	// 			.icon-mimashezhi {
	// 				margin-left: -3px;
	// 				margin-right: 5px;
	// 			}
	// 			.icon-jibenxinxi {
	// 				margin-left: -3px;
	// 				margin-right: 5px;
	// 			}
	// 		}
	// 		.icon-mimashezhi {
	// 			margin-right: 5px;
	// 		}
	// 		.icon-jibenxinxi {
	// 			margin-right: 5px;
	// 		}
	// 		.ant-menu-item.ant-menu-item-active.ant-menu-item-selected:hover {
	// 			color: @rok-primary-color;
	// 		}
	// 		.ant-menu-inline,
	// 		.ant-menu-vertical,
	// 		.ant-menu-vertical-left {
	// 			border-right: 0px solid #dee0e3;
	// 		}
	// 	}
	// 	.personal-main-coentent {
	// 		width: 100%;
	// 		background: #ffffff;
	// 		border-radius: 2px;
	// 		flex: 1;
	// 		padding: 24px;
	// 		border-radius: 6px;
	// 	}
	// }
}
</style>
